<template>
  <view>
    <view class="fix">
      <view class="topBox">
        <view class="topScreenBox">
          <view class="searchCell">
            <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719815210371515.png" class="searchimg">
            </image>
            <view class="scInp">
              <input type="text" v-model="searchContent" placeholder="请输入圈子" maxlength="10" placeholder-class="placname"
                @input="blurSearch" />
            </view>
          </view>
          <view class="scBtnBox">
            <view class="scSumBtn" @click="subSearch">搜索</view>
          </view>
        </view>
      </view>

    </view>
    <block v-if="teamlist.length > 0">
      <view class="cirlistbox">
        <view class="cirlist" v-for="(item, index) in teamlist" :key="index"
          :style="'background-image: url(' + (item.Logo ? item.Logo : '') + ');background-size: cover;background-repeat:no-repeat;'"
          @click.stop="nav_to('/pages/together/cirDetail?id=' + item.ID)">
          <view class="cirinfobox">
            <image class="hdimg" :src="item.Logo ? item.Logo : ''" mode="aspectFill"></image>
            <view class="cirinfo">
              <view class="cirname">{{ item.TeamName ? $util.entitiesToUtf16(item.TeamName) : '' }}</view>
              <view class="cirrem hiddenText">{{ item.Tips ? $util.entitiesToUtf16(item.Tips) : '' }}</view>
            </view>
            <view class="cirjoin">
              <image class="joinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
              </image>
              <view class="jointext" @click.stop="nav_to('/pages/ball/ball_add?golfType=0&id=' + item.ID)">发布</view>
            </view>
            <!-- <view class="cirquit" v-else @click.stop="quitTeam(item,index)">
                    <view class="jointext">退出</view>
                  </view> -->
          </view>
          <view class="databox">
            <view class="datatltie">
              <view class="datanum">{{ item.HotValue }}</view>
              <view class="datatext">挥力值</view>
            </view>
            <view class="datatltie">
              <view class="datanum">{{ item.BrowserNum }}</view>
              <view class="datatext">浏览</view>
            </view>
            <view class="datatltie">
              <view class="datanum">{{ item.MemberNum }}</view>
              <view class="datatext">成员</view>
            </view>
            <view class="datatltie" style="margin-right:0;" @click="nav_to('/pages/together/cir_member?type=2&IsTeamuser=1&id=' + item.ID)">
              <view class="datanum">{{ item.PendingAuditMemberNum || 0 }}</view>
              <view class="datatext">待审核人数</view>
            </view>
            <view class="datatltie dataEdit" @click.stop="nav_to('/pages/together/cir_edit?id=' + item.ID)">
              <view class="editCir">
               编辑
              </view>
            </view>

          </view>
          <view class="blackshadow"></view>
        </view>
      </view>

    </block>
    <block v-else>
      <view class="empty">
        <u-empty mode="list" width="100" height="100"
          icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true" iconSize="32"
          text="正在加载数据~">
        </u-empty>
      </view>
    </block>

  </view>
</template>

<script>
import ActivityCell from "./components/ActivityCell/ActivityCell.vue";
export default {
  components: {
    ActivityCell
  },
  data() {
    return {
      searchContent: '',
      teamlist: [],
      PageIndex: 1,
      PageSize: 10,
      longitude: null,
      latitude: null,
      isMore: false,
      user: {},
      huiNum: 1,//加入圈子所需挥豆
    };
  },
  async onLoad() {
    await this.getCity();
    this.getteam()
    this.user = uni.getStorageSync("user");
  },
  //下拉刷新
  onPullDownRefresh() {
    this.PageIndex = 1
    this.teamlist = []
    this.getteam()

    uni.stopPullDownRefresh()
  },
  // 触底事件
  onReachBottom() {
    if (this.isMore) {
      this.PageIndex++
      this.getteam()

    }
  },
  methods: {
    // 点击搜索
    subSearch() {
      this.PageIndex == 1
      this.getteam()

    },
    //空白搜索
    blurSearch() {

      if (this.searchContent == '') {
        this.PageIndex == 1
        this.getteam()

      }

    },
    // 获取圈子列表
    async getteam() {
      let res = await this.$api.post("Team/MyCreateTeam", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        TeamName: this.searchContent,
        LeaderID: this.user.UserID
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.isMore =
          Array.isArray(res.data) && res.data.length >= this.PageSize;
      }


    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    // 获取当前地址并解析
    async getCity() {
      let loc = await this.getLocationSysc();

      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
    },
  },
}
</script>
<style lang='scss'>
page {
  background-color: #f6f6f6;
}

.actconBoxList {
  width: 100%;
  padding: 40rpx 20rpx;
  margin-top: 200rpx;
}

.cirlistbox {
  margin-top: 130rpx;
  padding-bottom: 40rpx;
}

.cirlist {
  width: 702rpx;
  // height: 548rpx;
  border-radius: 24rpx;
  padding: 36rpx 32rpx;
  // background-color: #9796ed;
  margin: 0 auto;
  margin-top: 24rpx;
  position: relative;

  .blackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 702rpx;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }

  .cirinfobox {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    position: relative;
    z-index: 10;

    .hdimg {
      width: 104rpx;
      min-width: 104rpx;
      max-width: 104rpx;
      height: 104rpx;
      // border-radius: 16rpx;
      border-radius: 50%;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 400rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirjoin {
      width: 120rpx;
      height: 56rpx;
      background: #6C6AFF;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirquit {
      width: 100rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .databox {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;

    .datatltie {
      margin-right: 56rpx;
      text-align: center;

      .datanum {
        font-size: 36rpx;
        font-weight: bold;
        color: #EFEFEF;
      }

      .datatext {
        font-size: 24rpx;
        color: #EFEFEF;
      }


    }

    .dataEdit {
      width: 100rpx;
      margin-left: auto;
      margin-right: 0;

      .editCir {
        width: 100%;
        height: 56rpx;
        background: #6C6AFF;
        color: white;
        border-radius: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
  }
}

.fix {
  position: fixed;
  background-color: #fff;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
  padding-top: 20rpx;

  .endimg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    z-index: 1000;
    right: 150rpx;
    bottom: 28rpx;
  }

  .navbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;

    .navtext {
      width: calc(100% / 2);
      height: 100%;
      font-size: 28rpx;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

    }

    .text4 {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;

      .aft4 {
        width: 40rpx;
        height: 8rpx;
        background: #706EEE;
        border-radius: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.topBox {
  width: 100%;
  padding: 0 30rpx;
  padding-bottom: 25rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .topFastBtn {
    padding: 13rpx 24rpx;
    background: #706eee;
    border-radius: 32rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 24rpx;
      height: 24rpx;
    }

    .topFastText {
      font-size: 24rpx;
      color: #ffffff;
    }

    .topFastNum {
      position: absolute;
      top: -16rpx;
      right: -10rpx;
      width: 40rpx;
      background-color: red;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      font-size: 20rpx;
    }
  }
}

.searchCell {
  width: 100%;
  display: flex;
  align-items: center;
  // margin-top: 20rpx;

  .scIcon {
    margin-right: 16rpx;
  }

  .scInp {
    width: 380rpx;
    //   background: #f2f2f2;
    border-radius: 100rpx;
    //   padding: 10rpx 30rpx;

    >input {
      width: 100%;
      background: transparent;
    }

  }
}

.topScreenBox {
  width: 100%;
  display: flex;
  align-items: center;

  .searchCell {
    width: 100%;
    height: 72rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #706EEE;
    border-radius: 36rpx;
    background-color: #f2f2f2;

    .scIcon {
      margin-right: 16rpx;
    }

    .searchimg {
      width: 32rpx;
      height: 32rpx;
      margin-left: 24rpx;
    }

    .scInp {
      flex: 1;
      margin-left: 5rpx;

      >input {
        width: 100%;
        background: transparent;
      }

      .placname {
        color: #999999;
        font-size: 24rpx;
      }
    }

  }

  .scBtnBox {
    display: flex;
    // margin-left: auto;
    margin-right: 8rpx;

    .scSumBtn {
      // padding: 13rpx 34rpx;
      width: 136rpx;
      height: 64rpx;
      background: #706eee;
      border-radius: 32rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &:last-child {
        margin-left: 20rpx;
      }
    }
  }

  .tagBox {
    width: 100%;
    // overflow-y: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .tagCell {
        padding: 10rpx 20rpx;
        border-radius: 12rpx;
        border: 2rpx solid #706eee;
        background: white;
        color: #706eee;
        margin: 0 20rpx 10rpx;
        margin-left: 0;
        white-space: nowrap;
        font-size: 22rpx;
      }

      .tagIng {
        border: 2rpx solid #706eee;
        background: #706eee;
        color: white;
      }
    }
  }
}
</style>